<!doctype html>

<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Bmap - 白马地图，多源地图伴你出行">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Bmap 白马地图 五周年幸运活动</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon"/>

    <script type="text/javascript" src="jq/jquery.min.js"></script>

    <!-- Page styles -->
<!--    <link rel="stylesheet" href="https://fonts.geekzu.org/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=zh-CN">-->
<!--    <link rel="stylesheet" href="https://fonts.geekzu.org/icon?family=Material+Icons">-->
    <link rel="stylesheet" href="mdl/material.min.css">
    <link rel="stylesheet" href="styles.css">
    <script type="text/javascript" >
    $(document).ready(function(){
    $("#btn_five").click(function(){
      $("#usr").html("");
      $.get("https://bmaps.cn/i/luck/five",function(data, status){
      console.log(data);
      if(null != data && null != data.data && data.data.length > 0){
        for(var i = 0; i < data.data.length; i++){
          var htmlTxt = ""
          if (null != data.data[i].head && data.data[i].head.toString().startsWith("http")){
            htmlTxt += ("<img height=\"36\" width=\"36\" src=\"" + data.data[i].head +"\"/>");
          }else if (null != data.data[i].head){
            htmlTxt += ("<img height=\"36\" width=\"36\" src=\"http://res.bmaps.cn/" + data.data[i].head +"\"/>");
          }else {
            htmlTxt += ("<img height=\"36\" width=\"36\" src=\"images/default_head.png\"/>");
          }

          htmlTxt += "<p>"

          if(null != data.data[i].nickname && data.data[i].nickname.length > 0){
            htmlTxt += data.data[i].nickname;
          }else{
            htmlTxt += data.data[i].username;
          }
          htmlTxt += "</p>";
          $("#usr").append(htmlTxt);
        }

      }
      });
    });
    });
    </script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

    <div class="android-content mdl-layout__content" id="content">
        <h5>Bmap 白马地图 五周年幸运活动</h5>

        <button id="btn_five" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">随机5个用户</button><br><br>
        <p>每隔5分钟可刷新一次用户列表</p>
        <dev id="usr">

        </dev>

        <div>
            <p><b>最终幸运用户(截图)：</b></p>
            <img src="img/five_usr.jpg"/>
        </div>
    </div>

    <p class="beian-tips" id="beian">

        <div style="margin:0 auto; padding:0px 0;">
            <a target="_blank" href="https://beian.miit.gov.cn/" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">桂ICP备 2021009183号</p></a>
</div>
<div style="margin:0 auto; padding:0px 0;">
    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=45020302000210" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="beian.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">桂公网安备 45020302000210号</p></a>
</div>
</p>
</div>
<script src="mdl/material.min.js"></script>
</body>
</html>

